<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box{width: 100px;height: 100px;}
    .red{background: red;}
    .green{border:solid 10px green}
    .yellow{color: yellow;}
    .fs{font-size: 30px;}
  </style>
</head>
<body>
  <div class="box red green yellow">
    文字
  </div>
</body>
<script>
  var box = document.querySelector(".box");

  // console.log( box.class );

  // console.log( box.className );

  // 直接赋值，会覆盖
  // box.className = "abc";

  // 如果使用className添加一个新class名
  // 那么需要利用字符串拼接，注意两个class名之间的空格
  // box.className = box.className + " fs";

  // 删除red
  // var arr = box.className.split(" ");
  // arr.splice( arr.indexOf("red"), 1 );
  // box.className = arr.join(" ");

  // 删除red
  // box.className = box.className.replace(" red" , "");

  // js提供了一些专门操作class的方式
  // classList会获取到当前元素的所有class名，以伪数组的形式存放
  // console.log( box.classList );
  // 添加
  // box.classList.add("fs");
  // 删除
  // box.classList.remove("box");

  // 使用场景
  // 当元素只有一个class名时，可以使用className直接操作
  // 当元素有多个class名时，可以使用classList单独操作每一个

</script>
</html>